<template>
	<view class="idcard-layout">
		<xh-header title="请上传法人身份证正反面照片"></xh-header>
		<view class="idcard-img-box">
			<image class="idcard-img" :src="$uv.test.empty(formStore.frontPhoto) ? '/static/my/idcard_f@2x.png' : formStore.frontPhoto" mode="scaleToFill" @tap="showSelectImage('idcard_front')"></image>
			<image class="idcard-img" :src="$uv.test.empty(formStore.reversePhoto) ? '/static/my/idcard_b@2x.png' : formStore.reversePhoto " mode="scaleToFill" @tap="showSelectImage('idcard_back')"></image>
		</view>
		<xh-header title="请核对信息，若有误请手动更正"></xh-header>
		<xh-input showTitle title="姓名" placeholder="请输入法人姓名" v-model="formStore.userRealName"></xh-input>
		<xh-input showTitle title="身份证号" placeholder="请输入法人身份证号" v-model="formStore.identityNo"></xh-input>
		<xh-input title="截止日期" placeholder="请选择日期" showTitle isSelect @didSelect="showSelectDate" v-model="formStore.endCertTime">
			<template #right>
				<xh-checkbox text="长期" :isChecked="formStore.certType == '1'" @change="change"></xh-checkbox>
			</template>
		</xh-input>
		<view class="submit-btn" style="margin-top: 50rpx;" @tap="next">下一步</view>
		<uv-datetime-picker ref="datePicker" v-model="formStore.dateValue" mode="date" @confirm="confirm">
		</uv-datetime-picker>
	</view>
</template>

<script setup>
	import dayjs from 'dayjs'
	import { ref } from 'vue'
	import { useFormStore } from '@/common/stores'
	const formStore = useFormStore()
	const datePicker = ref(null)
	// 选择日期
	const showSelectDate = () => {
		datePicker.value.open()
	}
	// 选中长期回调
	const change = (value) => {
		if (value) {
			formStore.endCertTime = '长期'
			formStore.certType = '1'
		}
		else{
			formStore.certType = '0'
			formStore.endCertTime = ''
		}
	}
	const confirm = (res) => {
		formStore.endCertTime = dayjs(res.value).format('YYYY-MM-DD')
		formStore.certType = '0'
	}
	//选择图片
	const showSelectImage = async (type)=>{
		const url = await uni.$utils.uploadImage()
		if(type == 'idcard_front'){
			formStore.frontPhoto = url
		}
		else if(type == 'idcard_back'){
			formStore.reversePhoto = url
		}
		const ocrRes = await uni.$utils.getImageOcrInfo(url,type)
		if(!uni.$uv.test.empty(ocrRes.ocr)){
			if(type == 'idcard_front'){
				formStore.userRealName = ocrRes.ocr.name
				formStore.identityNo = ocrRes.ocr.idcard
			}
			else{
				if(ocrRes.ocr.endDate == '长期'){
					formStore.endCertTime = '长期'
					formStore.dateValue = ''
					formStore.certType = '1'
				}
				else{
					formStore.endCertTime = ocrRes.ocr.endDate
					formStore.dateValue = dayjs(ocrRes.ocr.endDate).valueOf()
					formStore.certType = '0'
				}
			}
		}
		
	}
	//下一步
	const next = () => {
		if(uni.$uv.test.empty(formStore.frontPhoto)){
			uni.$utils.showToast('请上传身份证正面照片')
			return
		}
		else if(uni.$uv.test.empty(formStore.reversePhoto)){
			uni.$utils.showToast('请上传身份证反面照片')
			return
		}
		else if(uni.$uv.test.empty(formStore.userRealName)){
			uni.$utils.showToast('请输入法人姓名')
			return
		}
		else if(uni.$uv.test.empty(formStore.identityNo)){
			uni.$utils.showToast('请输入法人身份证号')
			return
		}
		else if(uni.$uv.test.empty(formStore.endCertTime) && formStore.certType == '0'){
			uni.$utils.showToast('请选择截止日期')
			return
		}
		uni.navigateTo({
			url: '/pages/my/auth/bankcard/bankcard'
		})
	}
</script>

<style lang="scss" scoped>
	.idcard-layout {
		.idcard-img-box {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-column-gap: 20rpx;
			padding: 30rpx;
			background-color: #ffffff;

			.idcard-img {
				width: 100%;
				height: 221rpx;
				border-radius: 16rpx;
			}
		}
	}
</style>